<!-- SIDEBAR HEADER -->
<div class="header accent p-24" fxLayout="column" fxLayoutAlign="space-between">

    <div class="toolbar" fxLayout="row" fxLayoutAlign="end center">

        <button mat-icon-button matTooltip="Delete">
            <mat-icon>delete</mat-icon>
        </button>

        <button mat-icon-button class="" aria-label="Download" matTooltip="Download">
            <mat-icon>file_download</mat-icon>
        </button>

        <button mat-icon-button aria-label="More" matTooltip="More">
            <mat-icon>more_vert</mat-icon>
        </button>
    </div>

    <div>
        <div class="title mb-8">{{selected.name}}</div>
        <div class="subtitle secondary-text">
            <span>Edited</span>
            <span>: {{selected.modified}}</span>
        </div>
    </div>
</div>
<!-- / SIDEBAR HEADER -->

<!-- SIDEBAR CONTENT -->
<div class="content p-24" fusePerfectScrollbar>

    <div class="file-details" [@animate]="{value:'*',params:{delay:'200ms'}}">

        <div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center">
            <mat-icon class="type-icon s-48" [ngClass]="selected.type"></mat-icon>
        </div>

        <div class="offline-switch">
            <mat-slide-toggle [(ngModel)]="selected.offline" labelPosition="before">Available Offline</mat-slide-toggle>
        </div>

        <div class="title">Info</div>

        <table>
            <tr class="type">
                <th>Type</th>
                <td>{{selected.type}}</td>
            </tr>

            <tr class="size">
                <th>Size</th>
                <td>{{selected.size === '' ? '-': selected.size}}</td>
            </tr>

            <tr class="location">
                <th>Location</th>
                <td>{{selected.location}}</td>
            </tr>

            <tr class="owner">
                <th>Owner</th>
                <td>{{selected.owner}}</td>
            </tr>

            <tr class="modified">
                <th>Modified</th>
                <td>{{selected.modified}}</td>
            </tr>

            <tr class="opened">
                <th>Opened</th>
                <td>{{selected.opened}}</td>
            </tr>

            <tr class="created">
                <th>Created</th>
                <td>{{selected.created}}</td>
            </tr>
        </table>
    </div>

</div>
<!-- / SIDEBAR CONTENT -->
